<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="../../../../x3dom-include.js"></script>
    <title>ParticleSet</title>
</head>
<body>
<x3d width="800px" height="600px" id="x3d">
    <scene>
        <Background></Background>
        <Transform id="trans">
            <Shape id="shape">
                <Appearance>
                    <Material diffuseColor="0 1 0.2"></Material>
                    <DepthMode readOnly='true'></DepthMode>
                </Appearance>
                <ParticleSet id="ps" drawOrder='backToFront' size="1 1 1, 1 1 1, 1 1 1">
                    <Coordinate point='0 0 0, 1 1 1, 2 2 2'></Coordinate>
                    <Color color='1 1 0, 1 1 0, 1 1 0'></Color>
                </ParticleSet>
            </Shape>
        </Transform>
    </scene>
</x3d>

<div>
    <br><input type="button" value="Change" onclick="changeParticles();">
</div>

<script type="text/javascript">
    function changeParticles()
    {
        //manipulate position values
        var coordDOMNode  = document.getElementsByTagName("Coordinate")[0];
        var coordinateObj = coordDOMNode.requestFieldRef("point");
        
        coordinateObj[0] = new x3dom.fields.SFVec3f(0, 1, 1);
        coordinateObj[1] = new x3dom.fields.SFVec3f(2, 2, 2);
        coordinateObj[2] = new x3dom.fields.SFVec3f(3, 2, 2);
        coordinateObj.push(new x3dom.fields.SFVec3f(-1, -1, -1));
        
        coordDOMNode.releaseFieldRef("point");
    
    
        //manipulate particle size values
        var particleSetDOMNode = document.getElementById("ps");
        var sizeObj            = particleSetDOMNode.requestFieldRef("size");
        
        sizeObj[0] = new x3dom.fields.SFVec3f(3, 3, 3);
        sizeObj[1] = new x3dom.fields.SFVec3f(2, 2, 2);
        sizeObj[2] = new x3dom.fields.SFVec3f(0.5, 0.5, 0.5);
        sizeObj.push(new x3dom.fields.SFVec3f(1, 1, 1));
        
        particleSetDOMNode.releaseFieldRef("size");
        
        
        //manipulate color values
        var colorDOMNode = document.getElementsByTagName("Color")[0];         
        
        var colorObj = colorDOMNode.requestFieldRef("color");
        
        colorObj[0] = new x3dom.fields.SFColor(0, 1, 0);
        colorObj[1] = new x3dom.fields.SFColor(0, 0, 1);
        colorObj[2] = new x3dom.fields.SFColor(1, 0, 0);
        colorObj.push(new x3dom.fields.SFColor(1, 1, 1));
        
        colorDOMNode.releaseFieldRef("color");
    }
</script>
</body>
</html>
